<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../CSS/common.css">
    <link rel="stylesheet" href="../CSS/top.css">
    <link rel="stylesheet" href="../CSS/swiper-bundle.css">
    <link rel="stylesheet" href="../CSS/botton.css">
    <link rel="stylesheet" href="../CSS/GouWu.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <span>购物车</span>
        </header>
        <!-- 地址 -->
        <section class="warp">
            <img src="../img/dw.png" alt="">
            <p>西溪雅苑 35幢</p>
            <img src="../img/xl.png" alt="">
        </section>
        <section class="warp-1">
            <div class="div-1">
                <input type="checkbox" value="Bike" id="input3">
                <p>周二配送</p>
                <p>周六配送</p>
            </div>
            <div class="div-2" v-for="(item,index) in navOne" ::key="item.id">
                <input type="checkbox" value="Bike" id="input1" name="checkbox">
                <img :src="item.URL" alt="">
                <div class="div-3">
                    <p class="p">{{item.text}} </p>
                    <p class="pp">今日{{item.zhe}}折</p>
                    <p class="ppp">￥{{item.money}}</p>
                    <p class="pppp">￥{{item.moneys}}</p>
                    <p class="ppppp">
                        <img src="../img/jian.png" alt="" class="img-1" @click="min(index)" :disabled="item.count <= 1">
                        {{item.count}}
                        <img src="../img/jia.png" alt="" class="img-2" @click="plu(index)">
                    </p>
                </div>
            </div>
        </section>
        <section class="warp-2">
            <div>
                <span>商品个数</span>
                <span class="Zong"><em>1</em> 件</span>
            </div>
            <div>
                <span>商品总价</span>
                <span class="money">￥ {{getTotal.toFixed(2)}}</span>
            </div>
            <div>
                <span>活动优惠</span>
                <span class="span">-￥3.60</span>
            </div>
            <div>
                <span>配送费</span>
                <span>包邮</span>
            </div>
            <div>
                <span>商品实付</span>
                <span class="money-1">￥{{getTotal.toFixed(2)}}</span>
            </div>
            <p class="div-3">
                合计：<span class="money-1">￥{{getTotal.toFixed(2) }}</span>
            </p>
        </section>
        <section class="warp-3">
            <div class="div-1">
                <input type="checkbox" value="全选" id="input">
                <p>全选</p>
                <div class="div-2">合计<span class="money-1">{{getTotal.toFixed(2) }}</span>
                    <div class="div-3">包邮</div>
                </div>
                <a href="./提交订单.html"><button>去结算</button></a>
            </div>
        </section>
        <!-- 底部导航 -->
        <footer class="footer">
            <a href="./home.html" class="footer-2">
                <img src="../img/sy1.png" alt="">
                首页
            </a>
            <a href="./FenLei.html" class="footer-2">
                <img src="../img/fl.png" alt="">
                分类
            </a>
            <a href="#" class="footer-2">
                <img src="../img/gwc-2.png" alt="">
                购物车
            </a>
            <a href="./WoDe.html" class="footer-2">
                <img src="../img/wd.png" alt="">
                我的
            </a>

        </footer>
    </div>
    <script src="../jS/flexible.js"></script>
    <script src="../JS/vue3.js"></script>
    <script src="../JS/jquery.3.5.1.js"></script>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return { 
                    t:3.6,  
                    navOne: [],
                }
            },
            computed: {
                //计算总价
                getTotal(){
                    let tal=0;
                    
                    this.navOne.map((item,index)=>{
                       tal+=item.money*item.count;
                      
                    })
                    return tal-3.6
                },
                gettal(){
                    getTotal(value).toFixed(2)
                }
            },
            methods: {
                // 减少数量
                min(index){
                    var k=this.navOne[index].count
                    if(k<1)return
                        this. navOne[index].count--
                },
                
                // 增加数量
                plu(index){
                    this. navOne[index].count++
                },
            },
            mounted() {
                // 1
                fetch('../JSON/GoWu/navOne.json').then(res => res.json()).then(res => {
                    console.log(res);
                    this.navOne = res
                })
                $(function(){
            $('#input').change(function(){
                $("#input1,#input").prop("checked", $(this).prop("checked"));
                })

         });
            },
        }).mount("#app")
    </script>
</body>

</html>